<template>
  <view class="background">
    <view class="title">
      <view>{{ newDetail.title }}</view>
    </view>
    <view style="display: flex;align-items: center;justify-content: center;font-size: 13px;color: #606266;margin-bottom: 10px;">
      <image src="@/static/time_icon.png" /> {{ newDetail.publishDate }}
    </view>
    <view style="display: flex;align-items: center;justify-content: center;font-size: 13px;color: #606266;margin-bottom: 10px;">
      <image src="@/static/category_icon.png" /> {{ newDetail.category }}
    </view>
    <view class="text">
<!--      <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse>-->
      <rich-text :nodes="article"></rich-text>
    </view>
  </view>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'
import { marked } from 'marked'
import student from '@/api/student/index.js'
export default {
  components: {
    uParse
  },
  data () {
    return {
      newDetail: {
        id: 0,
        title: '',
        content: ``,
        category: '',
        publishDate: ''
      },
      article: ``,
    }
  },
  async onLoad(option) {
    await this.getNewDetail(Number(option.id))
  },
  methods: {
    async getNewDetail(id) {
      try {
        const res = await student.getNews(id)
        this.newDetail = res.data
        this.article = marked(this.newDetail.content)
      } catch (e) {
        console.log(e)
      }
    },
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>



<style>
@import url("@/components/u-parse/u-parse.css");
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: linear-gradient(to bottom, #E4DDF5 0%, #FFFFFF 20%); /* 从淡蓝色到白色的渐变 */
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;

  /* 	  align-items: center;
      justify-content: center; */
}
.title {
  padding: 20px;
  display: flex;
  font-size: 22px;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  height:8%;
}
image {
  width: 16px;
  height: 16px;
}
.text {
  padding: 20px;
  height: 78%;
}
</style>